<template>
  <!-- <div>
    <el-table :data="resourcebacks" border>
      <el-table-column
        prop="userName"
        label="反馈用户"
        align="center"
        width="150"
      />
      <el-table-column
        prop="orgName"
        label="组织机构"
        align="center"
        width="150"
      />
      <el-table-column
        prop="createTime"
        label="反馈时间"
        align="center"
        width="270"
      />
      <el-table-column prop="context" label="反馈信息" />
    </el-table>
    <div style="width: 100%;margin: 15px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="current"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div> -->
  <div class="updata_line beautifulScroll">
    <!-- 如果图片被放大，显示放大后的图片 -->
    <div
      v-if="isEnlarged"
      class="enlarged-image-overlay"
      @click="closeEnlargedImage"
    >
      <img :src="imageUrl" class="enlarged-image" />
      <i class="el-icon-close gba"></i>
    </div>
    <!-- 更新记录 -->
    <div v-if="resourcebacks.length == 0" class="zygxjl">
      暂无反馈记录
    </div>
    <el-timeline class="dfcsd" v-else>
      <li class="el-timeline-item activerel">
        <div class="el-timeline-item__tail"></div>
        <div
          class="el-timeline-item__node el-timeline-item__node--large el-timeline-item__node-- el-timeline-item__nodes"
        >
          <img src="@/images/clock.png" alt="" />
        </div>
        <div class="el-timeline-item__wrapper">
          <div class="el-timeline-item__content">
            <div class="fkboxs"></div>
          </div>
        </div>
      </li>
      <el-timeline-item
        placement="top"
        v-for="item in resourcebacks"
        :key="item.id"
        size="large"
        :class="item.replyContext ? 'activerel' : ''"
      >
        <div class="fkbox">
          <div class="fkrq">
            <!-- yyyy年MM月 -->
            {{ formatDate(item.createTime, 'yyyy/MM/dd hh:mm') }}
          </div>
          <div class="fkboxmin">
            <div class="fkbt" v-if="item.title != ''">
              {{ item.title }}
            </div>
            <div class="fkbt" v-if="!item.title">
              暂无标题
            </div>

            <div
              class="fknr"
              v-if="containsImgTag(item.context)"
              v-html="item.context"
              @click="enlargeImage(item.context)"
              ref="dynamicImage"
            ></div>
            <div class="fknr" v-else>
              {{ item.context }}
            </div>
            <div class="fknr" v-if="!item.context">
              暂无反馈内容
            </div>
            <div class="fkhf" v-if="item.replyContext">
              <div class="fkhfs">已回复</div>
              {{ item.replyContext }}
            </div>

            <div class="fkhfdf" v-if="!item.replyContext">
              <div
                class="fkhfs fkhfshf"
                @click="hfshowidfn(item.id)"
                v-show="!hf"
              >
                回复
              </div>
              <!-- {{ item.replyContext }} -->
            </div>
            <div class="hkf" v-show="hf && hfshowid == item.id">
              <el-input
                v-model="replyContext"
                placeholder="请输入回复内容"
                type="textarea"
              ></el-input>
            </div>
            <div
              class="subre"
              @click="subreplyContext(item.id)"
              v-show="hf && hfshowid == item.id"
            >
              保存
            </div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { simulationFeedbackList, saveBack } from '@/api/simulation.js'
import { DateFormat, formatDate } from '@/utils/date.js'
export default {
  props: {
    resourceId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isEnlarged: false,
      resourcebacks: [],
      current: 1,
      limit: 10,
      total: 0,
      hf: false,
      replyContext: '',
      hfshowid: ''
    }
  },
  created() {
    this.getResourceInfo()
  },
  methods: {
    enlargeImage(str) {
      // 点击图片放大
      // 使用正则表达式匹配 src 属性的值
      const srcRegex = /src="(.*?)"/
      const matches = str.match(srcRegex)

      // 如果匹配成功，matches[1] 就是 src 属性的值
      if (matches && matches.length > 1) {
        const src = matches[1]
        this.imageUrl = src
        console.log('图片地址', src) // 输出图片的地址
        this.isEnlarged = true
        console.log('点击了图片放大')
      } else {
        console.log('未找到 src 属性')
      }
    },
    closeEnlargedImage() {
      // 关闭放大的图片
      this.isEnlarged = false
    },
    //处理图片
    containsImgTag(str) {
      console.log(str)
      // 使用正则表达式判断字符串中是否包含 <img> 标签
      const imgTagRegex = /<img[\s\S]*?>/i
      console.log('是否包含', imgTagRegex.test(str))
      return imgTagRegex.test(str)
    },
    hfshowidfn(id) {
      this.hfshowid = id
      this.hf = !this.hf
    },
    subreplyContext(id) {
      saveBack({ id: id, replyContext: this.replyContext }).then(res => {
        // console.log(res.code)
        if (res.code == 'OK') {
          this.getResourceInfo()
          this.hf = false
          this.replyContext = ''
          this.$message.success(res.msg)
          return
        }
      })
    },
    formatDate(date, fmt) {
      return DateFormat(date, fmt)
    },
    getResourceInfo() {
      var data = {
        limit: this.limit,
        current: this.current,
        resourceId: this.resourceId
      }
      simulationFeedbackList(data).then(res => {
        console.log('反馈记录', res.data)
        this.resourcebacks = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange(current) {
      this.current = current
      this.getResourceInfo()
    }
  }
}
</script>
<style>
.activerel .el-timeline-item__node {
  background-color: #3370ff;
}
.el-timeline-item__nodes {
  background-color: #ffff !important;
}
.el-timeline-item__nodes img {
  margin-top: -12px;
}
.fkboxs {
  height: 90px;
}
.fknr img {
  cursor: pointer;
}

.enlarged-image-overlay {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.enlarged-image {
  max-width: 90%;
  max-height: 90%;
}
.gba {
  position: absolute;
  right: 40px;
  top: 30px;
  font-size: 20px;
  color: #fff;
}
</style>
